<template>
  <div class="customer-crm-page">
    <div class="page-header">
      <h2>客户关系管理 (CRM)</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="showAddDialog = true">新增客户</el-button>
        <el-button icon="Download">导出数据</el-button>
      </div>
    </div>

    <!-- 客户数据概览 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalCustomers }}</div>
            <div class="stat-label">客户总数</div>
            <div class="stat-trend positive">
              <el-icon><CaretTop /></el-icon>
              <span>+12.5%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><Star /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.vipCustomers }}</div>
            <div class="stat-label">VIP客户</div>
            <div class="stat-trend positive">
              <el-icon><CaretTop /></el-icon>
              <span>+8.3%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><Money /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">¥{{ stats.totalRevenue }}</div>
            <div class="stat-label">总营收</div>
            <div class="stat-trend positive">
              <el-icon><CaretTop /></el-icon>
              <span>+15.2%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.riskCustomers }}</div>
            <div class="stat-label">流失风险</div>
            <div class="stat-trend negative">
              <el-icon><CaretBottom /></el-icon>
              <span>-3.8%</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 客户列表和详细信息 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 客户列表 -->
        <el-tab-pane label="客户列表" name="list">
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="客户名称">
              <el-input v-model="filterForm.name" placeholder="请输入客户名称" clearable />
            </el-form-item>
            <el-form-item label="客户等级">
              <el-select v-model="filterForm.level" placeholder="请选择等级" clearable>
                <el-option label="普通客户" value="normal" />
                <el-option label="重要客户" value="important" />
                <el-option label="VIP客户" value="vip" />
                <el-option label="战略客户" value="strategic" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户状态">
              <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
                <el-option label="活跃" value="active" />
                <el-option label="休眠" value="inactive" />
                <el-option label="流失风险" value="risk" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
              <el-button icon="Refresh" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 客户表格 -->
          <el-table :data="customerList" stripe @row-click="handleRowClick">
            <el-table-column prop="id" label="客户ID" width="80" />
            <el-table-column prop="name" label="客户名称" width="150" />
            <el-table-column prop="level" label="客户等级" width="120">
              <template #default="{ row }">
                <el-tag :type="getLevelType(row.level)">{{ getLevelText(row.level) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="industry" label="所属行业" width="120" />
            <el-table-column prop="contact" label="联系人" width="100" />
            <el-table-column prop="phone" label="联系电话" width="130" />
            <el-table-column prop="totalOrders" label="订单数" width="100" align="center" />
            <el-table-column prop="totalAmount" label="累计消费" width="120" align="right">
              <template #default="{ row }">
                ¥{{ row.totalAmount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="lastOrderDate" label="最后交易" width="120" />
            <el-table-column prop="healthScore" label="健康度" width="100" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.healthScore" :color="getHealthColor(row.healthScore)" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click.stop="viewDetail(row)">详情</el-button>
                <el-button link type="success" @click.stop="createFollow(row)">跟进</el-button>
                <el-button link type="warning" @click.stop="editCustomer(row)">编辑</el-button>
                <el-button link type="info" @click.stop="viewOrders(row)">订单</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 客户跟进 -->
        <el-tab-pane label="客户跟进" name="follow">
          <el-button type="primary" icon="Plus" @click="showFollowDialog = true" style="margin-bottom: 15px">
            新增跟进
          </el-button>

          <el-table :data="followList" stripe>
            <el-table-column prop="customerName" label="客户名称" width="150" />
            <el-table-column prop="followType" label="跟进方式" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.followType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="followDate" label="跟进时间" width="180" />
            <el-table-column prop="followUser" label="跟进人" width="100" />
            <el-table-column prop="content" label="跟进内容" min-width="200" show-overflow-tooltip />
            <el-table-column prop="result" label="跟进结果" width="120">
              <template #default="{ row }">
                <el-tag :type="getResultType(row.result)">{{ row.result }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="nextFollowDate" label="下次跟进" width="120" />
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewFollowDetail(row)">详情</el-button>
                <el-button link type="success" @click="continueFollow(row)">继续跟进</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 客户分析 -->
        <el-tab-pane label="客户分析" name="analysis">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>客户等级分布</span>
                </template>
                <div ref="levelChartRef" class="chart-container"></div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>客户活跃度分析</span>
                </template>
                <div ref="activityChartRef" class="chart-container"></div>
              </el-card>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>客户价值分析 (RFM)</span>
                </template>
                <div ref="rfmChartRef" class="chart-container"></div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>行业分布</span>
                </template>
                <div ref="industryChartRef" class="chart-container"></div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 商机管理 -->
        <el-tab-pane label="商机管理" name="opportunity">
          <el-button type="primary" icon="Plus" @click="showOpportunityDialog = true" style="margin-bottom: 15px">
            新增商机
          </el-button>

          <el-table :data="opportunityList" stripe>
            <el-table-column prop="title" label="商机名称" width="200" />
            <el-table-column prop="customerName" label="客户名称" width="150" />
            <el-table-column prop="amount" label="预计金额" width="120" align="right">
              <template #default="{ row }">
                ¥{{ row.amount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="stage" label="商机阶段" width="120">
              <template #default="{ row }">
                <el-tag :type="getStageType(row.stage)">{{ row.stage }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="winProbability" label="赢单概率" width="120" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.winProbability" :color="getWinColor(row.winProbability)" />
              </template>
            </el-table-column>
            <el-table-column prop="owner" label="负责人" width="100" />
            <el-table-column prop="expectedCloseDate" label="预计成交日期" width="130" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getOpportunityStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewOpportunity(row)">详情</el-button>
                <el-button link type="success" @click="updateStage(row)">推进</el-button>
                <el-button link type="warning" @click="editOpportunity(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 客户画像 -->
        <el-tab-pane label="客户画像" name="profile">
          <el-card>
            <div class="profile-section">
              <h3>客户标签云</h3>
              <div class="tag-cloud">
                <el-tag
                  v-for="tag in customerTags"
                  :key="tag.name"
                  :type="tag.type"
                  :size="tag.size"
                  style="margin: 5px"
                >
                  {{ tag.name }} ({{ tag.count }})
                </el-tag>
              </div>
            </div>

            <el-divider />

            <div class="profile-section">
              <h3>客户购买偏好分析</h3>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="preference-card">
                    <div class="preference-title">热门品类</div>
                    <el-progress :percentage="85" status="success">电子产品</el-progress>
                    <el-progress :percentage="68">服装鞋包</el-progress>
                    <el-progress :percentage="52">家居用品</el-progress>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="preference-card">
                    <div class="preference-title">购买时段</div>
                    <el-progress :percentage="76" color="#409eff">工作日</el-progress>
                    <el-progress :percentage="24" color="#67c23a">周末</el-progress>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="preference-card">
                    <div class="preference-title">价格敏感度</div>
                    <el-progress :percentage="45" color="#e6a23c">高</el-progress>
                    <el-progress :percentage="35" color="#909399">中</el-progress>
                    <el-progress :percentage="20" color="#f56c6c">低</el-progress>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 新增客户对话框 -->
    <el-dialog v-model="showAddDialog" title="新增客户" width="700px">
      <el-form :model="customerForm" :rules="rules" ref="customerFormRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="customerForm.name" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户等级" prop="level">
              <el-select v-model="customerForm.level" placeholder="请选择等级">
                <el-option label="普通客户" value="normal" />
                <el-option label="重要客户" value="important" />
                <el-option label="VIP客户" value="vip" />
                <el-option label="战略客户" value="strategic" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industry">
              <el-select v-model="customerForm.industry" placeholder="请选择行业">
                <el-option label="制造业" value="manufacturing" />
                <el-option label="零售业" value="retail" />
                <el-option label="服务业" value="service" />
                <el-option label="金融业" value="finance" />
                <el-option label="IT互联网" value="it" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="customerForm.contact" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="customerForm.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="customerForm.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="公司地址" prop="address">
          <el-input v-model="customerForm.address" placeholder="请输入公司地址" />
        </el-form-item>
        <el-form-item label="客户需求" prop="requirement">
          <el-input
            v-model="customerForm.requirement"
            type="textarea"
            :rows="3"
            placeholder="请输入客户需求"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 新增跟进对话框 -->
    <el-dialog v-model="showFollowDialog" title="新增跟进" width="600px">
      <el-form :model="followForm" label-width="100px">
        <el-form-item label="客户">
          <el-select v-model="followForm.customerId" placeholder="请选择客户" filterable>
            <el-option
              v-for="customer in customerList"
              :key="customer.id"
              :label="customer.name"
              :value="customer.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进方式">
          <el-select v-model="followForm.followType" placeholder="请选择跟进方式">
            <el-option label="电话" value="phone" />
            <el-option label="邮件" value="email" />
            <el-option label="拜访" value="visit" />
            <el-option label="微信" value="wechat" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进内容">
          <el-input
            v-model="followForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入跟进内容"
          />
        </el-form-item>
        <el-form-item label="跟进结果">
          <el-select v-model="followForm.result" placeholder="请选择跟进结果">
            <el-option label="成功" value="success" />
            <el-option label="待跟进" value="pending" />
            <el-option label="无效" value="invalid" />
          </el-select>
        </el-form-item>
        <el-form-item label="下次跟进">
          <el-date-picker
            v-model="followForm.nextFollowDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showFollowDialog = false">取消</el-button>
        <el-button type="primary" @click="handleFollowSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 新增商机对话框 -->
    <el-dialog v-model="showOpportunityDialog" title="新增商机" width="600px">
      <el-form :model="opportunityForm" label-width="120px">
        <el-form-item label="商机名称">
          <el-input v-model="opportunityForm.title" placeholder="请输入商机名称" />
        </el-form-item>
        <el-form-item label="客户">
          <el-select v-model="opportunityForm.customerId" placeholder="请选择客户" filterable>
            <el-option
              v-for="customer in customerList"
              :key="customer.id"
              :label="customer.name"
              :value="customer.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预计金额">
          <el-input-number v-model="opportunityForm.amount" :min="0" :step="1000" />
        </el-form-item>
        <el-form-item label="商机阶段">
          <el-select v-model="opportunityForm.stage" placeholder="请选择阶段">
            <el-option label="初步接触" value="initial" />
            <el-option label="需求确认" value="requirement" />
            <el-option label="方案报价" value="proposal" />
            <el-option label="商务谈判" value="negotiation" />
            <el-option label="合同签订" value="contract" />
          </el-select>
        </el-form-item>
        <el-form-item label="赢单概率">
          <el-slider v-model="opportunityForm.winProbability" :marks="{ 0: '0%', 50: '50%', 100: '100%' }" />
        </el-form-item>
        <el-form-item label="预计成交日期">
          <el-date-picker
            v-model="opportunityForm.expectedCloseDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="商机描述">
          <el-input
            v-model="opportunityForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入商机描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showOpportunityDialog = false">取消</el-button>
        <el-button type="primary" @click="handleOpportunitySubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const stats = reactive({
  totalCustomers: 2856,
  vipCustomers: 328,
  totalRevenue: '15.8M',
  riskCustomers: 45
})

// 当前标签页
const activeTab = ref('list')

// 筛选表单
const filterForm = reactive({
  name: '',
  level: '',
  status: ''
})

// 客户列表
const customerList = ref([
  {
    id: 1,
    name: '华为技术有限公司',
    level: 'strategic',
    industry: '制造业',
    contact: '张经理',
    phone: '13800138001',
    totalOrders: 156,
    totalAmount: 2850000,
    lastOrderDate: '2025-01-10',
    healthScore: 95
  },
  {
    id: 2,
    name: '阿里巴巴集团',
    level: 'vip',
    industry: 'IT互联网',
    contact: '李总',
    phone: '13800138002',
    totalOrders: 128,
    totalAmount: 1980000,
    lastOrderDate: '2025-01-08',
    healthScore: 88
  },
  {
    id: 3,
    name: '万科地产',
    level: 'important',
    industry: '服务业',
    contact: '王主管',
    phone: '13800138003',
    totalOrders: 85,
    totalAmount: 1250000,
    lastOrderDate: '2024-12-28',
    healthScore: 72
  }
])

// 跟进记录
const followList = ref([
  {
    id: 1,
    customerName: '华为技术有限公司',
    followType: '拜访',
    followDate: '2025-01-12 14:30',
    followUser: '张三',
    content: '拜访客户，讨论新一轮合作方案',
    result: '成功',
    nextFollowDate: '2025-01-20'
  },
  {
    id: 2,
    customerName: '阿里巴巴集团',
    followType: '电话',
    followDate: '2025-01-11 10:00',
    followUser: '李四',
    content: '电话沟通产品需求和交付时间',
    result: '待跟进',
    nextFollowDate: '2025-01-15'
  }
])

// 商机列表
const opportunityList = ref([
  {
    id: 1,
    title: '华为Q1采购项目',
    customerName: '华为技术有限公司',
    amount: 5000000,
    stage: '商务谈判',
    winProbability: 75,
    owner: '张三',
    expectedCloseDate: '2025-02-28',
    status: '进行中'
  },
  {
    id: 2,
    title: '阿里云服务器采购',
    customerName: '阿里巴巴集团',
    amount: 3500000,
    stage: '方案报价',
    winProbability: 60,
    owner: '李四',
    expectedCloseDate: '2025-03-15',
    status: '进行中'
  }
])

// 客户标签
const customerTags = ref([
  { name: '高价值客户', count: 156, type: 'danger', size: 'large' },
  { name: '长期合作', count: 328, type: 'success', size: 'default' },
  { name: '技术型', count: 245, type: 'primary', size: 'default' },
  { name: '价格敏感', count: 189, type: 'warning', size: 'small' },
  { name: '决策快', count: 167, type: 'info', size: 'small' }
])

// 对话框
const showAddDialog = ref(false)
const showFollowDialog = ref(false)
const showOpportunityDialog = ref(false)
const customerFormRef = ref(null)

// 表单
const customerForm = reactive({
  name: '',
  level: '',
  industry: '',
  contact: '',
  phone: '',
  email: '',
  address: '',
  requirement: ''
})

const followForm = reactive({
  customerId: '',
  followType: '',
  content: '',
  result: '',
  nextFollowDate: ''
})

const opportunityForm = reactive({
  title: '',
  customerId: '',
  amount: 0,
  stage: '',
  winProbability: 50,
  expectedCloseDate: '',
  description: ''
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  level: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 方法
const getLevelType = (level) => {
  const types = {
    normal: 'info',
    important: 'primary',
    vip: 'warning',
    strategic: 'danger'
  }
  return types[level] || 'info'
}

const getLevelText = (level) => {
  const texts = {
    normal: '普通客户',
    important: '重要客户',
    vip: 'VIP客户',
    strategic: '战略客户'
  }
  return texts[level] || level
}

const getHealthColor = (score) => {
  if (score >= 80) return '#67c23a'
  if (score >= 60) return '#e6a23c'
  return '#f56c6c'
}

const getResultType = (result) => {
  const types = {
    success: 'success',
    pending: 'warning',
    invalid: 'info'
  }
  return types[result] || 'info'
}

const getStageType = (stage) => {
  const types = {
    initial: 'info',
    requirement: 'primary',
    proposal: 'warning',
    negotiation: 'danger',
    contract: 'success'
  }
  return types[stage] || 'info'
}

const getWinColor = (probability) => {
  if (probability >= 70) return '#67c23a'
  if (probability >= 40) return '#e6a23c'
  return '#f56c6c'
}

const getOpportunityStatusType = (status) => {
  return status === '进行中' ? 'success' : 'info'
}

const handleTabClick = (tab) => {
  console.log('切换标签页', tab.props.name)
}

const handleSearch = () => {
  console.log('搜索', filterForm)
  ElMessage.success('搜索成功')
}

const handleReset = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  ElMessage.success('重置成功')
}

const handleRowClick = (row) => {
  console.log('点击行', row)
}

const viewDetail = (row) => {
  console.log('查看详情', row)
  ElMessage.info('查看客户详情')
}

const createFollow = (row) => {
  followForm.customerId = row.id
  showFollowDialog.value = true
}

const editCustomer = (row) => {
  Object.assign(customerForm, row)
  showAddDialog.value = true
}

const viewOrders = (row) => {
  console.log('查看订单', row)
  ElMessage.info('查看客户订单')
}

const viewFollowDetail = (row) => {
  console.log('查看跟进详情', row)
  ElMessage.info('查看跟进详情')
}

const continueFollow = (row) => {
  console.log('继续跟进', row)
  ElMessage.success('继续跟进')
}

const viewOpportunity = (row) => {
  console.log('查看商机', row)
  ElMessage.info('查看商机详情')
}

const updateStage = (row) => {
  console.log('推进商机', row)
  ElMessage.success('商机阶段已更新')
}

const editOpportunity = (row) => {
  Object.assign(opportunityForm, row)
  showOpportunityDialog.value = true
}

const handleSubmit = () => {
  customerFormRef.value.validate((valid) => {
    if (valid) {
      console.log('提交表单', customerForm)
      ElMessage.success('保存成功')
      showAddDialog.value = false
    }
  })
}

const handleFollowSubmit = () => {
  console.log('提交跟进', followForm)
  ElMessage.success('跟进记录已保存')
  showFollowDialog.value = false
}

const handleOpportunitySubmit = () => {
  console.log('提交商机', opportunityForm)
  ElMessage.success('商机已创建')
  showOpportunityDialog.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.customer-crm-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 5px;
    }

    .stat-trend {
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 4px;

      &.positive {
        color: #67c23a;
      }

      &.negative {
        color: #f56c6c;
      }
    }
  }
}

.main-card {
  .filter-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  background: #f5f7fa;
  border-radius: 4px;

  &::before {
    content: '图表展示区域';
  }
}

.profile-section {
  margin-bottom: 30px;

  h3 {
    margin: 0 0 20px 0;
    color: #303133;
    font-size: 18px;
  }

  .tag-cloud {
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;
    min-height: 150px;
  }
}

.preference-card {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;

  .preference-title {
    font-weight: bold;
    margin-bottom: 15px;
    color: #303133;
  }

  .el-progress {
    margin-bottom: 15px;
  }
}
</style>

